<template>
    <div style="display: flex;justify-content: flex-end;">
      <a-button type="link" @click="router.push('/register')">注册</a-button>
    </div>
    <div class="login">

    <div class="login-image">       
      <a-image
        :width="200"
        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        :preview="false"
      />
      <h1>大华电力系统后台管理系统</h1>
    </div>
    <a-form
    :model="formState"
    name="basic"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-form-item
      label="Username"
      name="username"
      :rules="[{ required: true, message: 'Please input your username!' }]"
    >
      <a-input v-model:value="formState.username" />
    </a-form-item>

    <a-form-item
      label="Password"
      name="password"
      :rules="[{ required: true, message: 'Please input your password!' }]"
    >
      <a-input-password v-model:value="formState.password" />
    </a-form-item>

    <a-form-item name="remember" :wrapper-col="wrapperColItem">
      <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
    </a-form-item>

    <a-form-item :wrapper-col="wrapperColItem">
      <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { useRouter } from 'vue-router';

interface FormState {
  username: string;
  password: string;
  remember: boolean;
}

const router = useRouter();
const labelCol = { span: 10 }; 
const wrapperCol = { span: 5 }; 
const wrapperColItem = {offset: 10, span: 16 }
const formState = reactive<FormState>({
  username: '',
  password: '',
  remember: true,
});

const onFinish = (values: any) => {
  console.log('Success:', values);
  router.push(`/home?id=${0}`)
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};
</script>

<style scoped>
.login-image{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}
.login {
    margin-top: 10%;
}
</style>

